<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>将重复使用的包转换为组件</title>
    <script type="text/javascript" src="https://vuejs.org/js/vue.js"></script>
    <link rel="stylesheet" href="magic.css"/>
    <style>
        .card {
            position: relative;
            background-color: FloralWhite;
            width: 9em;
            height: 9em;
            margin: 0.5em;
            padding: 0.5em;
            font-family: sans-serif;
            box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.3);
        }
    </style>
</head>
<body>
<div id="app">
    <button @click="showRecipe = !showRecipe">食谱</button>
    <button @click="showNews = !showNews">头条</button>
    <puff>
        <article v-if="showRecipe" class="card">
            <h3>苹果派食谱</h3>
            <p>成分：苹果派。 程序：服务热。</p>
        </article>
    </puff>
    <puff>
        <article v-if="showNews" class="card">
            <h3>头条</h3>
            <p>唐老鸭是美国的新总统。</p>
        </article>
    </puff>
</div>

<script>

    Vue.component('puff', {
        functional: true,
        render: function (createElement, context) {
            var data = {
                props: {
                    'enter-active-class': 'magictime puffIn',
                    'leave-active-class': 'magictime puffOut'
                }
            }
            return createElement('transition', data, context.children)
        }
    });
    new Vue({
        el: '#app',
        data: {
            showRecipe: false,
            showNews: false
        }
    })
</script>


</body>
</html>